<#import "/admin/_layout.html" as layout>
<@layout.header "模板编辑">
    <link rel="stylesheet" href="/static/libs/jquery-file-upload/css/jquery.fileupload.css">
</@layout.header>
<@layout.body>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">模板</a></li>
                        <li class="breadcrumb-item active">编辑</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content">

        <div class="row">
            <div class="col-lg-3">
                <div class="box box-primary">
                    <div class="box-header">
                        <h5 class="box-title">&nbsp;&nbsp;当前目录：${templatePath!""}${currDir!""}</h5>
                    </div>
                    <form class="form-horizontal" autocomplete="off">
                        <div class="box-body no-padding">
                            <div id="uploaderTemplate">
                                <span class="btn btn-block btn-flat btn-info fileinput-button">
                                    <i class="fas fa-plus"></i>
                                    <span>上传模板文件</span>
                                    <input id="cfile" type="file" name="files" multiple>
                                </span>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12" style="height: 560px;overflow-y: scroll;">
                                    <table class="table" style="margin-bottom: 0px;">
                                        <tbody>
                                            <tr>
                                                <th style="line-height: 10px;">
                                                    <a href="/admin/template/edit?dirName=${parentDir!""}"> ... [返回上级]</a>
                                                </th>
                                            </tr>

                                        <#if dirs?? && (dirs?size>0)>
                                            <#list dirs as item>
                                                <tr>
                                                    <th style="line-height: 10px;">
                                                        <a href="/admin/template/edit?dirName=${currDir!""}${item.fileName}"> ${item.fileName} [目录]</a>
                                                    </th>
                                                </tr>
                                            </#list>
                                        </#if>
                                        <#if files?? && (files?size>0)>
                                            <#list files as item>
                                                <tr>
                                                    <th style="line-height: 10px;">
                                                        <a href="/admin/template/edit?dirName=${currDir!""}&fileName=${item.fileName!}">
                                                            ${item.fileName} <#if currFileName==item.fileName>（编辑中）</#if>
                                                        </a>
                                                        <a href="javascript:;" class="delBtn" style="float:right;color: red;font-size: 12px;" data-path="${currDir!""}/${item.fileName!}">[删除]</a>
                                                    </th>
                                                </tr>
                                            </#list>
                                        </#if>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="box box-primary">
                    <form class="form-horizontal" autocomplete="off">
                        <#assign fileSuffix=(currFileName?substring(currFileName?last_index_of(".")))!""/>

                        <#if fileSuffix?lower_case == ".jpg"
                            || fileSuffix == ".jpeg"
                            || fileSuffix == ".png"
                            || fileSuffix == ".ico"
                            || fileSuffix == ".bmp"
                            || fileSuffix == ".webp"
                            || fileSuffix == ".gif">
                            <div id="editor" for-filename="${currFileName!}"></div>
                            <div class="text-center">
                                <img src="/${currDir!""}/${currFileName!""}" style="width: 50%">
                            </div>
                        <#else>
                            <div class="box-body no-padding">
                                <div id="editor" style="height: 560px;" for-filename="${currFileName!}">${fileContent!}</div>
                            </div>
                            <div class="box-footer" style="padding-top: 5px;">
                                <div class="col-sm-offset-2 col-sm-10 submit-block">
                                    <div class="box-submit">
                                        <button type="button" onclick="doSubmit()" class="btn btn-info">更新文件</button>
                                        按快捷键[ ctrl + s ]也能保存
                                    </div>
                                </div>
                            </div>
                        </#if>
                    </form>
                </div>
            </div>
        </div>

        <form id="myForm" action="/admin/template/doEditSave" method="post">
            <input type="hidden" name="fileContent" id="fileContent">
            <input type="hidden" name="dirName" value="${currDir!}">
            <input type="hidden" name="fileName" value="${currFileName!}">
        </form>
    </section>
</@layout.body>
<@layout.script>
    <script src="/static/libs/ace/ace.js"></script>
    <script src="/static/libs/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="/static/libs/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="/static/libs/jquery-file-upload/js/jquery.fileupload.js"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/eclipse");

        var editFileName = $("#editor").attr("for-filename");// "index.html";
        var model = "ace/mode/html";

        if (editFileName.indexOf(".css") != -1) {
            model = "ace/mode/css";
        } else if (editFileName.indexOf(".js") != -1) {
            model = "ace/mode/javascript";
        } else if (editFileName.indexOf(".xml") != -1) {
            model = "ace/mode/xml";
        }
        editor.session.setMode(model);

        function doSubmit() {
            $("#fileContent").attr("value", editor.getSession().getValue());
            $("#myForm").ajaxSubmit({
                type: "post",
                success: function (result) {
                    if (result.code == "1") {
                        alertSuccess("保存成功");
                    } else {
                        alertError("保存失败");
                    }
                },
                error: function () {
                    alertError('系统错误，请稍后重试。');
                }
            });
            return false;
        }

        doListenerCtrlsAndCommands(doSubmit);

        function compareFile(uploadFile) {
            var upFile = uploadFile[0]["name"];
            var strFile = "${strFiles!}";
            if (strFile.indexOf(upFile) == -1) {
                return true;
            }
            return confirm(upFile + " 文件已经存在，确定覆盖吗？");
        }

        $('#cfile').fileupload({
            dropZone: $('#uploader'),
            url: '/admin/template/doUpload?dirName=${currDir!""}',
            sequentialUploads: true,
            add: function (e, data) {
                if (compareFile(data.files)) {
                    data.submit();
                }
            },
            done: function (e, data) {
                if(data.result.code == 1) {
                    alertSuccess("文件上传成功...", function () {
                        location.reload();
                    });
                }else {
                    alertError(data.result.message);
                }
            }
        });

        $(".delBtn").on("click", function () {
            var path = $(this).attr('data-path');

            layer.confirm('确定要删除文件吗?删除后不可恢复', {
                btn : ['确定', '取消']
            }, function(i) {
                layer.close(i);
                ajaxPost("/admin/template/doDelFile", {filePath: path}, function () {
                    alertSuccess("删除成功", function(){
                        location.reload();
                    })
                })
            });

        })

    </script>
</@layout.script>